<template>
	<div class="water-mark" :style="'background:url(' + can.toDataURL('image/png') + ') left top repeat'"></div>
</template>

<script>
	export default {
		name: 'WaterMark',
		props: {
			content: {
				type: String,
				default: "张三"
			}
		},
		data() {
			return {
				can: '',
				jobId: "",
				markContent: ""
			}
		},
		created() {
			this.jobId = setInterval(() => {
				this.markContent = this.content +" " + this.formattedDate()
				this.initCan()
			}, 1000)
		},
		beforeDestroy() {
			if (this.jobId) {
				clearInterval(this.jobId)
			}
		},
		methods: {
			initCan() {
				let can = document.createElement('canvas')
				can.width = 410
				can.height = 130
				let cans = can.getContext('2d')
				cans.rotate((-20 * Math.PI) / 180)
				cans.font = '15px Vedana'
				cans.fillStyle = 'rgba(125, 125, 125, .3)'
				cans.textAlign = 'left'
				cans.textBaseline = 'Middle'
				cans.fillText(`${this.markContent}`, can.width / 20, can.height)
				this.can = can
			},
			formattedDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');
				const second = date.getSeconds().toString().padStart(2, '0');
				const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				console.log(formattedDate);
				return formattedDate
			}

		}
	}
</script>

<style lang="scss" scoped>
	.water-mark {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 10;
	}
</style>